<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <section id="wrap">
      <h2 class="title">百度音乐榜单</h2>
      <ul id="list">
        <li>
          <input type="checkbox" />
          <span>第一条信息</span>
          <a href="javascript:;" class="collect">收藏</a>
          <a href="javascript:;" class="cancelCollect">取消收藏</a>
          <a href="javascript:;" class="remove">删除</a>
        </li>
        <!-- <li>
        <input type="checkbox" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
      <li>
        <input type="checkbox" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li> -->
      </ul>
      <footer class="footer">
        <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      </footer>
    </section>
    <script>
      var data = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: true,
          collect: false,
        },
        {
          id: 1,
          title: "兄弟 - 艾热",
          checked: false,
          collect: false,
        },
        {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: true,
          collect: true,
        },
        {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false,
        },
        {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: false,
          collect: false, //是否收藏 true 收藏 false 没有收藏
        },
      ];

      let ulEle = document.querySelector("#list");
      renderDom(data);
      deselectAll();
      function renderDom(data) {
        ulEle.innerHTML = "";
        data.forEach(function (item, key) {
          let liEle = document.createElement("li");
          liEle.innerHTML = `<input type="checkbox" ${
            item.checked ? "checked" : ""
          } />
        <span>${item.title}</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>`;

          liEle.onclick = (e) => {
            let target = e.target;
            if (target.nodeName === "INPUT") {
              data[key].checked = target.checked;
              document.querySelector("#checkAll").checked = data.every(
                (item) => item.checked
              );
            }
          };
          liEle.querySelector(".remove").onclick = (e) => {
            data.splice(key, 1);
            renderDom(data);
          };

          if (item.collect) {
            liEle.querySelector(".cancelCollect").style.display = "none";
            liEle.querySelector(".collect").style.display = "inline-block";
          } else {
            liEle.querySelector(".collect").style.display = "none";
            liEle.querySelector(".cancelCollect").style.display =
              "inline-block";
          }
          liEle.querySelector(".collect").onclick = (e) => {
            e.target.style.display = "none";
            liEle.querySelector(".cancelCollect").style.display =
              "inline-block";
          };
          liEle.querySelector(".cancelCollect").onclick = (e) => {
            e.target.style.display = "none";
            liEle.querySelector(".collect").style.display = "inline-block";
          };

          ulEle.appendChild(liEle);
        });
      }
      function deselectAll() {
        document.querySelector("#checkAll").onclick = (e) => {
          let target = e.target;
          let flag = target.checked;
          data.forEach((item) => {
            flag ? (item.checked = true) : (item.checked = false);
          });
          renderDom(data);
        };
      }
    </script>
  </body>
</html>
